<template>
	<view>
		<!-- 举报理由文字 -->
		<view class="report-text paddiang">
			请选择举报投诉的理由
		</view>

		<!-- 举报理由 -->
		<view class="report-reason paddiang">
			<!--低俗色情  -->
			<view class="report-contetn" v-for="(item,i) in myList" :key="i" @click="state(item)">
				<view>
					{{item.text}}
				</view>
				<!-- 选中的 -->
				<view class="pitchOn" v-if="item.type==1">
					<view class="circle"></view>
				</view>
				<!-- 未选中的 -->
				<view class="unselected" v-if="item.type==0">
				</view>
			</view>

		</view>

		<!-- 举报理由文字 -->
		<view class="report-text paddiang">
			填写其他原因
		</view>

		<!-- 其他举报理由多行输入 -->
		<view class="textarea">
			<textarea @blur="bindTextAreaBlur" placeholder-style="color:#cac7c8" placeholder="请填写您举报投诉的理由" />
			</view>
		
		<!-- 确认举报按钮 -->
		<view class="btn">
			确认举报投诉
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myList:[
					{text:'低俗色情',type:1},
					{text:'政治敏感',type:0},
					{text:'血腥暴力',type:0},
					{text:'赌博',type:0},
					{text:'广告',type:0},
					{text:'违法犯罪',type:0},
					{text:'侵权',type:0},
					{text:'其他',type:0},
					]
			};
		},
		methods:{
			// 输入框的值
			 bindTextAreaBlur (e) {
			    console.log(e.detail.value)
			},
			// 点击的理由
			state(i){
				// 遍历所有的数据吧type等于0
				this.myList.forEach(item=>{
					item.type=0
				})
				// 给当前点击的type赋值
				i.type=1;
			}
		}
	}
</script>

<style lang="scss">
	// 理由文字
	.report-text {
		margin: 30rpx 0;
		font-size: 26rpx;
		color: #888;
	}

	// 理由内容
	.report-reason {
		margin: 0 30rpx;
		background-color: #fff;
		height: 800rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;

		.report-contetn {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f8f8f8;
		}
		// 选中的圆
		.pitchOn{
			width: 50rpx;
			height: 50rpx;
			border: 1px solid #3576e9;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			.circle{
				width: 20rpx;
				height: 20rpx;
				background-color: #3576e9;
				border-radius: 50%;
				
			}
			
		}
		// 未选中的
		.unselected{
			width: 50rpx;
			height: 50rpx;
			border: 1px solid #cac7c8;
			border-radius: 50%;
		}

	}
	.textarea{
		margin: 0 30rpx;
		height: 160rpx;
		background-color: #fff;
		textarea{
			padding: 30rpx;
			border-radius: 16rpx;
		}
	}
	.btn{
		width: 200rpx;
		height: 60rpx;
		background-color: #fdd201;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
		margin: 40rpx 0 0 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
	}
	
</style>
